<template>
    <div  id="xl">
        <!--表头结束-->
        <!--table开始-->

        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/s' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>住院管理</el-breadcrumb-item>
            <el-breadcrumb-item>出院记录</el-breadcrumb-item>
        </el-breadcrumb>


        <el-card>
            <!--表头-->
            <el-row>
                <el-col :span="4">
                    <el-input placeholder="请输入出院号"></el-input>
                </el-col>
                <!--打印导入导出-->
                <el-button type="primary"  @click="dialogVisible = true">新增</el-button>
            </el-row>
            <el-table
                    :data="tableData1.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    stripe
                    style="width: 100%"
            >
                <el-table-column
                        prop="churegNum"
                        label="出院号">
                </el-table-column>
                <el-table-column
                        prop="churegDate"
                        :formatter="dateformat"
                        label="出院日期">
                </el-table-column>
                <el-table-column
                        prop="tyhChunotEntity.tyhHosregEntity.tyhHosnotEntity.tyhPatientEntity.patientName"
                        label="病人姓名">
                </el-table-column>
                <el-table-column
                        label="出院类型">
                    <template  #default="scope">
                        <template v-if="scope.row.tyhChunotEntity.chunotType =='1'">
                            痊愈出院
                        </template>
                        <template v-if="scope.row.tyhChunotEntity.chunotType =='2'">
                            转院
                        </template>
                        <template v-if="scope.row.tyhChunotEntity.chunotType =='3'">
                            放弃治疗
                        </template>
                        <template v-if="scope.row.tyhChunotEntity.chunotType =='4'">
                            其他
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <br>
            <!--分页-->

        </el-card>
        <el-dialog
                title="提示"
                v-model="dialogVisible"
                width="60%"
                :before-close="handleClose"
                >
            <el-form status-icon  ref="ruleForm"  :rules="rules" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="出院通知号:" prop="procurementId" >
                        <el-select v-model="chunotFrom.chunotNum" filterable @change="cha(chunotFrom.chunotNum)">

                                <el-option
                                        v-for="provider in chunotFrom"
                                        :key="provider.chunotNum"
                                        :label="provider.chunotNum"
                                        :value="provider.chunotNum"
                                />

                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="出院日期" prop="">
                            <el-date-picker
                                    format="YYYY-MM-DD HH:mm:ss"
                                    type="datetime"
                                    v-model="churegFrom.churegDate"
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="10">
                        <el-form-item label="病人姓名" prop="">
                            <el-input v-model="chunotFrom2.tyhPatientEntity.patientName" disabled></el-input>

                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="押金余额" prop="">
                            <el-input v-model="chunotFrom2.tyhPatientEntity.patientYue" disabled></el-input>

                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false,addchu()">确 定</el-button>
    </span>
            </template>
        </el-dialog>

        <div class="fy_div">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData1.length">
            </el-pagination>
        </div>

    </div>
</template>
<script>
    import http, {service} from "@/http/request";
    import qs from "qs";
    import moment from "moment";
    export default{
        name:"cyjl",
        components: {},



        data() {
            return {
                dialogVisible: false,
                tableData1:[],
                tableData2:[],
                tableData3:[],
                chunotNum:"",
                currentPage:1, //初始页
                pagesize:10,    //    每页的数据
                chunotFrom: {
                    chunotNum: "",
                    chunotDate: "",
                    chunotType: "",
                    hosregNum: "",
                    patientId: "",
                    chunotYizhu: "",
                    chunotPrice: "",
                },

                chunotFrom2: {
                    chunotNum: "",
                    chunotDate: "",
                    chunotType: "",
                    hosregNum: "",
                    patientId: "",
                    chunotYizhu: "",
                    chunotPrice: "",
                    tyhPatientEntity:{
                        patientId:'',
                        patientName:'',
                        patientSex:'',
                        patientYue:'',
                    },
                },

                churegFrom:{
                    churegDate:'',
                    churegPrice:'',
                    chunotNum:'',
                    patientId:''
                },
            }
        },
        methods:{
            dateformat(row , column){
                const data = row[column.property]
                if (data == undefined){
                    return
                }
                return moment(data).format("yyyy-MM-DD HH:mm:ss")
            },

            addchu(){
                this.churegFrom.patientId=this.chunotFrom2.tyhPatientEntity.patientId
                this.churegFrom.chunotNum=this.chunotFrom2.chunotNum
                service.post("http://localhost:8088/add-chureg",this.churegFrom)
                    .then((v) => {
                        this.$message('出院成功！');
                        this.initData()
                    })
            },

            cha(num){
                service.get("http://localhost:8088/find-chachu",{params:{num:num}})
                    .then((v) => {
                        this.chunotFrom2 = v.data;
                    })
            },

            initData() {
                service.get("http://localhost:8088/find-churegs")
                    .then((v) => {
                        this.tableData1 = v.data;
                        this.initData1()
                    })
            },

            initData1() {
                service.get("http://localhost:8088/find_chuban")
                    .then((v) => {
                        this.chunotFrom = v.data;
                        console.log(this.chunotFrom)
                    })
            },


            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },

            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }
        },
        created() {
            this.initData()
        },
    }




</script>

<style scoped>
    a {
        text-decoration: none;
    }
    .router-link-active {
        text-decoration: none;
    }

    .el-card{
        margin-top: 50px;

    }
    .block{
        margin-left: 350px;
    }
    .fy_div{
        margin-top:20px;
        margin-left: 450px;
    }
</style>